<template>
  <div>
    <el-row :gutter="20">
      <el-row style="margin: 10px" :gutter="10">
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="8">
              <a href="#" class="showItemA">
                <div class="showItemText">
                  <p>今日销量</p>
                  <p>0元</p>
                </div>
              </a>
            </el-col>
            <el-col :span="8">
              <a href="#" class="showItemA">
                <div class="showItemText">
                  <p>在售商品</p>
                  <p>{{ InSellingGoodsCount }}件</p>
                </div>
              </a>
            </el-col>
            <el-col :span="8">
              <a href="#" class="showItemA">
                <div class="showItemText">
                  <p>总会员量</p>
                  <p>{{ UserCount }}人</p>
                </div>
              </a>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="8">
              <a href="#" class="showItemA">
                <div class="showItemText">
                  <p>文件数量</p>
                  <p>{{ FileValueCount }}个</p>
                </div>
              </a>
            </el-col>
            <el-col :span="8">
              <a href="#" class="showItemA">
                <div class="showItemText">
                  <p>通知数量</p>
                  <p>{{ ArticleCount }}条</p>
                </div>
              </a>
            </el-col>
            <el-col :span="8">
              <a href="#" class="showItemA">
                <div class="showItemText">
                  <p>昨日验证码发送量</p>
                  <p>{{ VerificationYesterdayRegister }}条</p>
                </div>
              </a>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="20">
            <el-col :span="4">
              <a href="#" class="showItemA">
                <el-progress type="circle" :percentage="a"></el-progress>
                <p style="text-align: center">终端负载状态</p>
              </a>
            </el-col>
            <el-col :span="4">
              <a href="#" class="showItemA">
                <el-progress type="circle" :percentage="b"></el-progress>
                <p style="text-align: center">终端CPU使用率</p>
              </a>
            </el-col>
            <el-col :span="4">
              <a href="#" class="showItemA">
                <el-progress type="circle" :percentage="55"></el-progress>
                <p style="text-align: center">终端内存使用率</p>
              </a>
            </el-col>
            <el-col :span="4">
              <a href="#" class="showItemA">
                <el-progress type="circle" :percentage="68"></el-progress>
                <p style="text-align: center">终端网络状态</p>
              </a>
            </el-col>
            <el-col :span="4">
              <a href="#" class="showItemA">
                <el-progress type="circle" :percentage="76"></el-progress>
                <p style="text-align: center">终端可用时长</p>
              </a>
            </el-col>
            <el-col :span="4">
              <a href="#" class="showItemA">
                <el-progress type="circle" :percentage="90"></el-progress>
                <p style="text-align: center">旧顾客比例</p>
              </a>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="12">
            <div id="lt1" style="width: 400px; height: 250px"></div>
          </el-col>
          <el-col :span="12">
            <div id="rt1" style="width: 400px; height: 250px"></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <div id="r1" style="width: 800px; height: 250px"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div id="lb1" style="width: 800px; height: 350px"></div>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="12">
            <div id="rb1" style="width: 400px; height: 350px"></div>
          </el-col>
          <el-col :span="12">
            <div id="rb2" style="width: 400px; height: 350px"></div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Home",
  data() {
    return {
      loginStatus: true,
      ArticleCount: 0,
      InSellingGoodsCount: 0,
      UserCount: 0,
      FileValueCount: 0,
      VerificationYesterdayRegister: 0,
      a: 0,
      b: 0
    }
  },
  created() {
    this.FindArticleCount()
    this.FindInSellingGoodsCount()
    this.FindUserCount()
    this.FindFileValueCount()
    this.FindVerificationYesterdayRegister()
  },
  mounted() {
    this.drawChartTest1()
    this.drawChartTest2()
    this.drawChartTest3()
    this.drawChartTest4()
    this.a = 15
    this.b = 30
  },
  methods: {
    FindArticleCount() {
      this.$axios({
        url: this.$api.FindArticleCount,
        method: 'get'
      }).then(res => {

        this.ArticleCount = res.data

      })
    },
    FindInSellingGoodsCount() {
      this.$axios({
        url: this.$api.FindInSellingGoodsCount
      }).then(res => {

        this.InSellingGoodsCount = res.data

      })
    },
    FindUserCount() {
      this.$axios({
        url: this.$api.FindUserCount,
        method: "get",
      }).then(res => {

        this.UserCount = res.data

      })
    },
    FindFileValueCount() {
      this.$axios({
        url: this.$api.FindFileValueCount,
        method: 'get'
      }).then(res => {

        this.FileValueCount = res.data

      })
    },
    FindVerificationYesterdayRegister() {
      this.$axios({
        url: this.$api.FindVerificationYesterdayRegister,
        method: 'get',
      }).then(res => {

        this.VerificationYesterdayRegister = res.data

      })
    },
    drawChartTest1() {
      let lt1 = echarts.init(document.getElementById("lt1"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "商品销量排行榜",
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      lt1.setOption(option)
    },
    drawChartTest2() {
      let rt1 = echarts.init(document.getElementById("rt1"));
      let r1 = echarts.init(document.getElementById("r1"));
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: 'ECharts测试2',
          textStyle: {
            fontSize: 16
          }
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      };
      rt1.setOption(option)
      r1.setOption(option)
    },
    drawChartTest3() {
      let lb1 = echarts.init(document.getElementById("lb1"));
      let option = {
        title: {
          text: '浏览量排行榜',
          textStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '衬衫',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '羊毛衫',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '雪纺衫',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '裤子',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '高跟鞋',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      lb1.setOption(option)
    },
    drawChartTest4() {
      let rb1 = echarts.init(document.getElementById("rb1"));
      let rb2 = echarts.init(document.getElementById("rb2"));
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      }
      rb1.setOption(option)
      rb2.setOption(option)
    },
  },
}
</script>

<style scoped>
.el-progress-circle svg {
  width: 126px !important;
}

/deep/ svg {
  width: 126px;
}

/deep/ .showItemA svg path:first-child {
  stroke: rgb(229, 233, 242) !important;
}

/deep/ .showItemA svg path:last-child {
  stroke: rgb(32, 160, 255) !important;
}

</style>